<!-- 新增印章 -->
<template>
  <div class="base-setting">
    <pageHeaderNew :title="title" :breadCrumb="breadCrumb" showBack>
    </pageHeaderNew>

    <div class="wrap">
      <a-form
        :model="formData.data"
        ref="refForm"
        :rules="rules"
        auto-label-width
        size="large"
      >
        <a-form-item label="印章名称" field="project" show-colon>
          <a-input v-model="formData.data.project"></a-input>
        </a-form-item>
        <a-form-item
          label="企业全称"
          field="describe"
          show-colon
          :help="`请确保企业全称与营业执照上的一致`"
        >
          <a-input v-model="formData.data.project"></a-input>
        </a-form-item>
        <a-form-item label="备注" field="remark" show-colon>
          <a-textarea
            v-model="formData.data.remark"
            show-word-limit
            :max-length="50"
            :auto-size="{
              minRows: 4
            }"
          ></a-textarea>
        </a-form-item>
        <a-form-item
          label="上传印章"
          field="describe"
          show-colon
          :content-flex="false"
          :merge-props="false"
        >
          <a-upload action="/" />
          <a-space direction="vertical">
            <div style="color: #f87b07; margin: 10px 0">
              请上传背景透明的印章图片，且图上的公司名称必须与企业全称一致
            </div>
            <span>背景透明签名制作过程参考：</span>
            <span>1、在一张白纸上盖章/签章</span>
            <span>2、手机拍下刚刚的盖章/签章</span>
            <span
              >3、传到电脑使用抠图软件，对图章/签章抠图（去掉白色背景）</span
            >
            <div>
              4、生成背景透明的PNG格式图片

              <a-tooltip background-color="#fff">
                <template #content>
                  <div style="color: #000">合格样例</div>
                </template>
                <span style="color: #165dff">合格样式</span>
              </a-tooltip>
            </div>
          </a-space>
        </a-form-item>
        <a-form-item>
          <a-space :size="30">
            <a-button @click="router.back()">取消</a-button>
            <a-button type="primary" @click="save">确认</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
const router = useRouter();
const title = '创建印章';

const breadCrumb: string[] = ['合同', '基础设置', '企业印章', '创建印章'];

const formData = reactive({
  data: {}
});

const save = async () => {
  //
};
</script>

<style scoped lang="less">
.wrap {
  padding: 20px;
  width: 50%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);

  .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
}
</style>
